<template>
    <el-button link type="primary" size="small" @click="openDetailAction">
        <el-icon>
            <View/>
        </el-icon>
        查看详情
    </el-button>
    <el-dialog :model-value="openDetail"
               :lock-scroll="false"
               append-to-body
               @close="closeDetail"
               title="详情" width="50%">
        <el-descriptions
                title="详情"
                :column="3"
                border>
            <#list tableFields as field>
                <el-descriptions-item label="${field.comment}">
                    {{ ${ignoreFirstHumpName}Model.${field.name} }}
                </el-descriptions-item>
            </#list>
        </el-descriptions>
    </el-dialog>
</template>
<script setup>
    import {ref} from "vue";
    import {get${humpName}Detail} from "@/api/${serviceName}/${humpName}Api.js";
    import {View} from "@element-plus/icons-vue";

    const props = defineProps(["detailId"])
    const openDetail = ref(false);
    const ${ignoreFirstHumpName}Model = ref({
        <#list tableFields as field>
        ${field.name}: '',
        </#list>
    })

    const openDetailAction = () => {
        get${humpName}Detail({id: props.detailId}).then(res => {
            if (res.success) {
                ${ignoreFirstHumpName}Model.value = res.data
            }
        })
        openDetail.value = true
    }

    const closeDetail = () => {
        openDetail.value = false
    }

</script>
